import React from 'react';
import {StyleSheet, View, Dimensions} from "react-native";
import Tag from "../../ant-copy/tag/Tag";

const {width, heigth} = Dimensions.get('window');

const px = pxWidth => {
  if (width === 1) {
    return StyleSheet.hairlineWidth;
  }
  return Math.floor(width / 375 * pxWidth);
};


export default class TagList extends React.Component {

  static defaultProps = {
    disabled: false,
    small: false,
    selected: false,
    closable: true,
    onClose() {
    },
    afterClose() {
    },
    onChange() {
    },
    data: ['小狗', '小猫', '小猪', '小狗', '小猫', '小猪', '小狗', '小猫', '小猪', '小狗', '小猫', '小猪',],
  }

  state = {
    data: this.props.data || [],
  }

  data = [];


  render() {
    return (
      <View style={{width: width, flexWrap: 'wrap', flexDirection: 'row'}}>
        {
          this.state.data.map((item, index) => {
            return (
              <Tag
                style={{marginHorizontal: 8, marginVertical: 4}}
                disabled={this.props.disabled}
                small={this.props.small}
                selected={this.props.selected}
                closable={this.props.closable}
                onClose={() => this.onClose(index)}
                afterClose={this.props.afterClose && this.props.afterClose(item)}
                onChange={this.props.onChange && this.props.onChange(item)}
                key={index}>{item}</Tag>)
          })
        }
      </View>
    )
  }

  onClose = (index) => {
    this.data.push(this.state.data[index]);
    this.props.onClose && this.props.onClose(this.data)
  }
}
